<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })
    console.log(vm);

    // Vue自定义事件

    // vm.$on(event,callback)  绑定自定义事件

    // vm.$off(event,callback)  清除自定义事件 (对应函数引用清除)

    // vm.$emit(event,data)   触发自定义事件   data(对应事件名称触发事件,携带的数据)

    

    let a,b,c,d;
    // console.log(a = 1);  // a=1  console.log(a)

    a = function(arg){
        console.log("自定义事件hello被触发了1",arg);
    }
    vm.$on("hello", a);

    vm.$on("hello", b = function(arg){
        console.log("自定义事件hello被触发了2",arg);
    });

    vm.$on("world",c = function(arg){
        console.log("自定义事件world被触发了1",arg);
    });

    vm.$on("world",d = function(arg){
        console.log("自定义事件world被触发了2",arg);
    });

    
    vm.$off("hello",a);

    vm.$off("hello",b);

    vm.$off("world",c);

    vm.$off("world",d);


    vm.$emit("hello",10);
    vm.$emit("world",20);


    console.log(vm);



</script>
</html>